<template>
<el-dialog title="组合资源" :visible.sync="value" :before-close="hideForm"  :close-on-click-modal="false" width="750px" top="5vh">	
  <el-form :inline="true" :model="listGroupQuery">
    <el-form-item>
      <el-input v-model="listGroupQuery.resName" :clearable = "true" placeholder="课件名称"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button-group>
        <el-button type="primary" icon="el-icon-search"  @click="onSubmitGroup">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh"  @click="getGroupItems">刷新</el-button>        
      </el-button-group>
    </el-form-item>
  </el-form>
  <el-table  :data="listGroup" border>
    <el-table-column align="center" width="130" label="资源ID" prop="id" show-overflow-tooltip></el-table-column>  
    <el-table-column align="center" label="缩略图"  width="120" >
      <template slot-scope="scope">
        <div class="view-img-x">
          <img :src="scope.row.resUrl | setResUrl(scope.row.resType)" />     	
        </div>
      </template>        
    </el-table-column> 
    <el-table-column align="center"  label="资源名称" prop="resName" show-overflow-tooltip>
      <template slot-scope="scope">
        {{scope.row.resName}}
      </template>
    </el-table-column>    
    <el-table-column align="center" label="类型" prop="resType"  width="110">
      <template slot-scope="scope">
        <template>{{ scope.row.resType | typeFilter }}</template>
      </template>
    </el-table-column>                     
    <el-table-column align="center"  width="150" label="操作">
      <el-button-group slot-scope="scope" v-if="listGroupTab"> 
        <el-button type="primary" size="mini"  @click.native.prevent="goToOne(scope.row)">跳转</el-button>
        <el-button type="danger" size="mini"  @click.native.prevent="goToDel(scope.row)">删除</el-button>  
      </el-button-group>
      <el-button-group slot-scope="scope" v-else>
        <el-button type="primary" size="mini" @click.native.prevent="addGroup(scope.row)">关联</el-button>
        <el-button type="primary" size="mini"  @click.native.prevent="goToOne(scope.row)">跳转</el-button>
      </el-button-group>          
    </el-table-column>             
  </el-table>     
</el-dialog>
</template>

<script>
import config from '@/api/bgapi';
import request from '@/utils/request';
export default {
	props: ['value','groupNum'],		
  data() {
		return {
      listGroupQuery: {
        resName: '',
				groupNum:'',
        page: 1,
        pageSize: 15
      },
			listGroup:[],
			listGroupTab:true			
		}
	},
	watch:{
		value(newNum,oldNum){
			this.getGroupItems();
		}
	},
  mounted() {
	},
  methods: {
		async getGroupItems(){
			this.listGroupTab = true;
			var res = await request.get(config.resources,{params:{groupId:this.groupNum}})
			if(res.code == '20000'){
				this.listGroup = res.data;
			}	
		},
		async onSubmitGroup(){
			this.listGroupQuery.groupNum = this.groupNum;
			var res = await request.get(config.resources,{params:this.listGroupQuery});
			if(res.code == '20000'){
				this.listGroupTab = false;
				this.listGroup = res.data;
			}			
		},
		async addGroup(item){
			var res = await request.put(config.groupRes+'/'+this.listGroupQuery.groupNum,{type:'add',id:item.id})
			if(res.code == '20000'){
				this.listGroupTab = true;
				this.getGroupItems();
			}				
		},
		async goToDel(item){
			var res = await request.put(config.groupRes+'/'+this.groupNum,{type:'del',id:item.id})	
			if(res.code == '20000'){
				this.getGroupItems();
			}
		},
		goToOne(item){
			this.$emit('goToOne', item.id);
		},		
		hideForm(){
			this.$emit('input', false);
		},		
	},
  filters: {
    typeFilter(status) {
      const typeMap = { 0: '图片', 1: '视频', 2: '音频', 3: '文字',9:'富文本',10:'组合' }
      return typeMap[status]
    },
		setResUrl(img,type){
			if(type == '0'){
				return process.env.VUE_APP_BASE_API+img;	
			}else if(type == '1'){
				return require('@/assets/images/video.png');	
			}else if(type == '2'){
				return require('@/assets/images/audio.png');	
			}else if(type == '3'){
				return require('@/assets/images/text.png');
			}else if(type == '9'){
				return require('@/assets/images/edit-text.png');
			}else if(type == '10'){
				return require('@/assets/images/group.png');
			}
		}
  },  
};
</script>

<style scoped>
.view-img-x{ vertical-align:middle; line-height:0;border:1px solid #FAFAFA; background:#fff;  height:40px;  margin:0 0 0 10px; line-height:0; width:auto; max-width:80px;}
.view-img-x >>> img{ max-width:100% !important; max-height:100%  !important;}
</style>
